<style>

</style>
<template>
  <div>
  <el-tabs v-model="activeTab" type="card" style="width: 1500px" align="center">
      <el-tab-pane label="健康档案" name="healthArchives">
        <el-card>
          <div class="resident-info" align="left">
            <h3>居民信息</h3>
            <el-row style="text-align: left">
              <p style="height: 10px;">
                <div style="float: left;margin-left: 100px;width: 300px">居民编号：{{ residentInfo.id }}</div>
                <div style="float: left;width: 300px">姓名：{{ residentInfo.name }}</div>
                <div style="float: left;width: 300px"></div>
                <div style="float: left;width: 300px">身份证号：{{ residentInfo.sfz }}</div>
              </p>

              <p style="height: 70px;">
                <div style="float: left;margin-left: 100px;width: 300px">手机号码：{{ residentInfo.sjh }}</div>
                <div style="float: left;width: 300px">现居地：{{ residentInfo.xjd }}</div>
                <div style="float: left;width: 300px">登陆密码：{{ residentInfo.dlmm }}</div>
                <div style="float: left;width: 300px">行政区划：{{ residentInfo.xzqh }}</div>
              </p>


              <p style="height: 70px;">
                <div style="float: left;margin-left: 100px;width: 300px">居民标签：{{ residentInfo.bq }}</div>
                <div style="float: left;width: 300px">性别：{{ residentInfo.sex == 1 ? '男' : '女' }}</div>
                <div style="float: left;width: 300px">出生日期：{{ residentInfo.ctime }}</div>
                <div style="float: left;width: 300px">籍贯：{{ residentInfo.jg }}</div>
              </p>

              <p style="height: 70px;">
                <div style="float: left;margin-left: 100px;width: 300px">民族：{{ residentInfo.mz }}</div>
                <div style="float: left;width: 300px">文化程度：{{ residentInfo.whcd }}</div>
                <div style="float: left;width: 300px">婚姻状况：{{ residentInfo.hy }}</div>
                <div style="float: left;width: 300px">职业：{{ residentInfo.zy }}</div>
              </p>

              <p style="height: 70px;">
                <div style="float: left;margin-left: 100px;width: 300px">工作单位：{{ residentInfo.gzdw }}</div>
                <div style="float: left;width: 300px">紧急联系人：{{ residentInfo.lxr }}</div>
                <div style="float: left;width: 300px">联系人电话：{{ residentInfo.lxdh }}</div>
                <div style="float: left;width: 300px">户籍类型：{{ residentInfo.hjlx }}</div>
              </p>

              <p style="height: 70px;">
                <div style="float: left;margin-left: 100px;width: 300px">费用类型：{{ residentInfo.fy }}</div>
                <div style="float: left;width: 300px">定点医疗单位：{{ residentInfo.yldw }}</div>
                <div style="float: left;width: 300px">来源：{{ residentInfo.ly }}</div>
              </p>
            </el-row>
          </div>
          <div class="resident - health - info" style="margin-top: 20px" align="left">
            <h3>健康信息</h3>
            <el-row>
              <p style="height: 10px;">
                <div style="float: left;margin-left: 100px;width: 300px">身高：{{ healthInfo.sg }}</div>
                <div style="float: left;width: 300px">体重：{{ healthInfo.zl }}</div>
                <div style="float: left;width: 300px">血型：{{ healthInfo.xx }}型</div>
                <div style="float: left;width: 300px">RH阴性：{{ healthInfo.yx }}型</div>
              </p>
              <p style="height: 70px;">
                <div style="float: left;margin-left: 100px;width: 300px">过敏史：{{ healthInfo.gms }}</div>
                <div style="float: left;width: 300px">既往史：无</div>
                <div style="float: left;width: 300px">就诊史：无</div>
                <div style="float: left;width: 300px">家族病史：无</div>
              </p>
            </el-row>

          </div>
          <div class="resident-family-members" style="margin-top: 10px" align="left">
            <h3>家庭成员</h3>
            <div
                style="width: 170px;height: 70px;padding: 10px;background-color: antiquewhite;margin-top: 10px;float: left;margin-right: 15px"
                v-for="item in this.relationInfo">
              <img :src="item.img"
                   alt="" style="width: 50px; height: 50px;float: left;">
              <div style="float:left; margin-left: 20px">
                <div style="height: 20px;margin-bottom: 5px">{{ item.name }}&nbsp;&nbsp;<font size="1px"
                                                                                              color="#a9a9a9">{{
                    item.age
                  }}岁</font>
                </div>
                <div style="height: 10px"><font size="1px" color="#a9a9a9">关系：{{ item.gx }}</font></div>
              </div>

            </div>

          </div>

        </el-card>
        <el-button align="left" type="primary" style="width: 160px" @click="editFamilyInfo">编辑家庭成员信息</el-button>
        <el-button style="width: 100px" @click="fh()">返回</el-button>
      </el-tab-pane>


      <el-tab-pane label="健康记录" name="healthRecords">
        <div>
          <el-card>
            <!--            体重-->
            <div>
              <el-row :span="10">
                <el-col :span="12">
                  <el-card align="left">
                    体重趋势：<br>
                    <font size="1">单位：kg</font>
                    <div style="height: 400px;width: 600px" id="line">
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card align="left">
                    体重记录：
                    <div style="height: 410px">
                      <el-table
                          :data="tableData"
                          stripe
                          style="width: 100%">
                        <el-table-column
                            prop="ctime"
                            label="测量时间"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="tz"
                            label="数值"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="tzpg"
                            label="评估">
                        </el-table-column>
                        <el-table-column
                            prop="ly"
                            label="数据来源">
                        </el-table-column>
                        <el-table-column
                            prop=""
                            label="操作">
                          <template slot-scope="scope">
                            <el-button type="text" style="width: 20px" @click="handleClick(scope.row,'1')">编辑</el-button>
                            <el-button type="text" style="width: 20px" @click="del(scope.row.id)">删除</el-button>

                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <!--            血糖-->
            <div v-show="!cq">
              <el-row :span="10">
                <el-col :span="12">
                  <el-card align="left">
                    血糖趋势：
                    <el-button type="primary" style="width: 100px" @click="xg()">餐后</el-button>
                    <br>
                    <font size="1">单位：mmol/L</font>
                    <div style="height: 400px;width: 600px" id="line2">
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card align="left">
                    血糖记录：
                    <div style="height: 410px">
                      <el-table
                          :data="tableData"
                          stripe
                          style="width: 100%">
                        <el-table-column
                            prop="ctime"
                            label="测量时间"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="xt"
                            label="数值"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="xtpg"
                            label="评估">
                        </el-table-column>
                        <el-table-column
                            prop="ly"
                            label="数据来源">
                        </el-table-column>
                        <el-table-column
                            prop=""
                            label="操作">
                          <template slot-scope="scope">
                            <el-button type="text" style="width: 20px" @click="handleClick(scope.row,'2')">编辑</el-button>
                            <el-button type="text" style="width: 20px" @click="del(scope.row.id)">删除</el-button>

                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>

            <!--            餐后血糖-->
            <div v-show="cq">
              <el-row :span="10">
                <el-col :span="12">
                  <el-card align="left">
                    血糖趋势：
                    <el-button type="primary" @click="xg()">餐前</el-button>
                    <br>
                    <font size="1">单位：mmol/L</font>
                    <div style="height: 400px;width: 600px" id="line5">
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card align="left">
                    血糖记录：
                    <div style="height: 410px">
                      <el-table
                          :data="tableData2"
                          stripe
                          style="width: 100%">
                        <el-table-column
                            prop="ctime"
                            label="测量时间"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="xt"
                            label="数值"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="xtpg"
                            label="评估">
                        </el-table-column>
                        <el-table-column
                            prop="ly"
                            label="数据来源">
                        </el-table-column>
                        <el-table-column
                            prop=""
                            label="操作">
                          <template slot-scope="scope">
                            <el-button type="text" style="width: 20px" @click="handleClick(scope.row,'2')">编辑</el-button>
                            <el-button type="text" style="width: 20px" @click="del(scope.row.id)">删除</el-button>

                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>

            <!--            血压-->
            <div>
              <el-row :span="10">
                <el-col :span="12">
                  <el-card align="left">
                    血压趋势：<br>
                    <font size="1">收缩压：蓝色</font>&nbsp;
                    <font size="1">舒张压：绿色</font><br>
                    <font size="1">单位：mmHg</font>
                    <div style="height: 400px;width: 600px" id="line3">
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card align="left">
                    血糖记录：
                    <div style="height: 410px">
                      <el-table
                          :data="tableData"
                          stripe
                          style="width: 100%">
                        <el-table-column
                            prop="ctime"
                            label="测量时间"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop=""
                            label="数值"
                            width="180">
                          <template slot-scope="scope">
                            {{ scope.row.ssxy }}/{{ scope.row.szxy }}
                          </template>
                        </el-table-column>
                        <el-table-column
                            prop="xypg"
                            label="评估">
                        </el-table-column>
                        <el-table-column
                            prop="ly"
                            label="数据来源">
                        </el-table-column>
                        <el-table-column
                            prop=""
                            label="操作">
                          <template slot-scope="scope">
                            <el-button type="text" style="width: 20px" @click="handleClick(scope.row,'3')">编辑</el-button>
                            <el-button type="text" style="width: 20px" @click="del(scope.row.id)">删除</el-button>

                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <!--            心率-->
            <div>
              <el-row :span="10">
                <el-col :span="12">
                  <el-card align="left">
                    心率趋势：<br>
                    <font size="1">单位：bmp</font>
                    <div style="height: 400px;width: 600px" id="line4">
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card align="left">
                    心率记录：
                    <div style="height: 410px">
                      <el-table
                          :data="tableData"
                          stripe
                          style="width: 100%">
                        <el-table-column
                            prop="ctime"
                            label="测量时间"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="xl"
                            label="数值"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="xypg"
                            label="评估">
                        </el-table-column>
                        <el-table-column
                            prop="ly"
                            label="数据来源">
                        </el-table-column>
                        <el-table-column
                            prop=""
                            label="操作">
                          <template slot-scope="scope">
                            <el-button type="text" style="width: 20px" @click="handleClick(scope.row,'4')">编辑</el-button>
                            <el-button type="text" style="width: 20px" @click="del(scope.row.id)">删除</el-button>

                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
        <el-button @click="fh()">返回</el-button>
      </el-tab-pane>
      <el-tab-pane label="签约信息" name="signingInformation" align="left">
        <div class="resident-info" align="left" style="margin-left: 20px">
          <h3>当前签约信息 <font size="2px" color="#7fffd4">
            <el-button type="text" @click="bj()">编辑</el-button>
          </font></h3>
          <el-row style="text-align: left">
            <p style="height: 10px;">
              <div style="float: left;margin-left: 100px;width: 300px">签约编号：{{ qy.bianhao }}</div>
              <div style="float: left;width: 300px">
                签约状态：{{
                  qy.status == 1 ? '待审核' : qy.status == 2 ? '待支付' : qy.status == 3 ? '已驳回' : qy.status == 4 ? '生效中' : '已过期'
                }}
              </div>
              <div style="float: left;width: 300px">签约机构：{{qy.jname}}</div>
              <div style="float: left;width: 300px">签约团队：{{ qy.tname }}</div>
            </p>
          </el-row>
          <el-row style="text-align: left">
            <p style="height: 10px;">
              <div style="float: left;margin-left: 100px;width: 300px">签约医生：{{ qy.yname }}</div>
              <div style="float: left;width: 300px">服务包：{{ qy.fname }}</div>
              <div style="float: left;width: 300px">签约周期：{{ qy.zhouqi }}</div>
              <div style="float: left;width: 300px">费用：{{ qy.feiyon }}</div>
            </p>
          </el-row>

          <el-row style="text-align: left">
            <p style="height: 10px;">
              <div style="float: left;margin-left: 100px;width: 300px">签约类型：{{ qy.lx }}</div>
              <div style="float: left;width: 300px">申请时间：{{ qy.sqsj }}</div>
              <div style="float: left;width: 300px">生效日期：{{ qy.sxdate }}</div>
              <div style="float: left;width: 300px">签约备注：{{ qy.bz }}</div>
            </p>
          </el-row>
        </div>

        <div class="resident-info" align="left" style="margin-left: 20px">
          <h3>签约记录</h3>
          <el-table :data="qys" style="text-align: center">
            <el-table-column
                width="50"
                align="center">
            </el-table-column>
            <el-table-column align="center" prop="bianhao" label="编号" width="150"></el-table-column>
            <el-table-column align="center" prop="jname" label="签约机构" width="150"></el-table-column>
            <el-table-column align="center" prop="yname" label="签约医生" width="220"></el-table-column>
            <el-table-column align="center" prop="fname" label="服务包" width="150"></el-table-column>
            <el-table-column align="center" prop="sqsj" label="申请时间" width="170"></el-table-column>
            <el-table-column align="center" prop="dqsj" label="到期时间" width="170"></el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="viewDetails(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="fh()">返回</el-button>
        </div>
      </el-tab-pane>


      <el-tab-pane label="服务记录" name="serviceRecords">
        <div class="resident-info" align="left" style="margin-left: 20px" v-for="item in this.fws">
          <div style="display: flex;">
            <div style="margin: 100px;width: 200px;float: left;">
              <p align="right">{{item.ftime}}</p>
              <p align="right">{{item.status==1?'待服务':'已完成'}}</p>
            </div>
            <div style=" width: 1000px;float: left;margin-top: 100px">
              <h3>服务信息<font size="2px" color="#7fffd4"><a href="">编辑</a></font></h3>
              <p style="height: 10px;">
                <div style="float: left;width: 260px">服务编号：{{item.id}}</div>
                <div style="float: left;width: 260px">服务状态：{{item.status==1?'待服务':'已完成'}}</div>
                <div style="float: left;width: 260px">服务机构：{{item.jid}}</div>
              </p>
              <br>
              <p style="height: 10px;">
                <div style="float: left;width: 260px">服务团队：{{item.tid}}</div>
                <div style="float: left;width: 260px">服务医生：{{item.yid}}</div>
                <div style="float: left;width: 260px">服务包：{{item.fwbid}}</div>
              </p>
              <br>
              <p style="height: 10px;">
                <div style="float: left;width: 260px">服务项目：{{item.xid}}</div>
                <div style="float: left;width: 260px">服务地点：{{item.dd}}</div>
                <div style="float: left;width: 260px">服务来源：{{item.ly}}</div>
              </p>
              <br>
              <p style="height: 10px;">
                <div style="float: left;width: 260px">提交时间：{{item.ttime}}</div>
                <div style="float: left;width: 260px">审核时间：{{item.stime}}</div>
                <div style="float: left;width: 260px">审核人：{{item.shr}}</div>
              </p>
              <br>
              <p style="height: 10px;">
                <div style="float: left;width: 260px">服务时间：{{item.ftime}}</div>
                <div style="float: left;width: 260px">服务备注：{{item.bz}}</div>
              </p>
              <br>
             <div v-if="item.status==2&&item.jlb!=null">
               <h3>健康随访信息</h3>
               <p style="height: 10px;">
                 <div style="float: left;width: 260px">血压：{{item.jlb.ssxy}}/{{item.jlb.szxy}}</div>
                 <div style="float: left;width: 260px">空腹血糖：{{item.jlb.xt}}</div>
                 <div style="float: left;width: 260px">心率：{{item.jlb.xl}}</div>
               </p>
               <p style="height: 20px;">
                 <div style="float: left;width: 260px">病情描述：{{item.jlb.ms}}</div>
                 <div style="float: left;width: 260px">健康指导：{{item.jlb.zd}}</div>
               </p>
             </div>
            </div>
          </div>

        </div>
      </el-tab-pane>


      <el-dialog title="编辑信息" :visible.sync="dialogFormVisible">
        <el-form :model="form" align="left">
          <el-form-item label="数据类型">
            <el-select v-model="form.lx" placeholder="请选择类型">
              <el-option label="请选择" value=""></el-option>
              <el-option label="体重" value="体重"></el-option>
              <el-option label="血糖" value="血糖"></el-option>
              <el-option label="血压" value="血压"></el-option>
              <el-option label="心率" value="心率"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="测量时间">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:ss:mm" placeholder="选择日期"
                            v-model="form.ctime" style="width: 200px"></el-date-picker>
          </el-form-item>
          <el-form-item label="数据值：">
            <el-input v-model="form.value" placeholder="请输入数据值" style="width: 800px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;qx()">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false;qd()">确 定</el-button>
        </div>
      </el-dialog>

    </el-tabs>


  </div>
</template>

<script>
import * as echarts from 'echarts';
import cc from "@/views/cc.vue";

var option;

option = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ],
  tooltip: {
    trigger: 'axis', // 设置触发方式为坐标轴触发，即鼠标悬浮在坐标轴上的数据点附近时触发提示框
    axisPointer: {
      type: 'cross' // 设置坐标轴指针类型为十字准线，这样鼠标悬浮时会有更清晰的指示效果
    },
    formatter: function (params) {
      // params是一个数组，包含了触发tooltip的各个数据系列的相关信息
      let tooltipStr = '';
      for (let i = 0; i < params.length; i++) {
        let data = params[i].data;
        tooltipStr += `体重：${data}<br>`;
        // 这里可以根据实际需求添加更多信息，比如如果有对应的x轴值，可以添加进来
        // 假设你的数据结构中每个数据点对象有一个名为'xValue'的属性对应x轴值
        // tooltipStr += `时间：${data.xValue}<br>`;
      }
      return tooltipStr;
    }
  }
};
var option2;

option2 = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ],
  tooltip: {
    trigger: 'axis', // 设置触发方式为坐标轴触发，即鼠标悬浮在坐标轴上的数据点附近时触发提示框
    axisPointer: {
      type: 'cross' // 设置坐标轴指针类型为十字准线，这样鼠标悬浮时会有更清晰的指示效果
    },
    formatter: function (params) {
      // params是一个数组，包含了触发tooltip的各个数据系列的相关信息
      let tooltipStr = '';
      for (let i = 0; i < params.length; i++) {
        let data = params[i].data;
        tooltipStr += `血糖：${data}<br>`;
        // 这里可以根据实际需求添加更多信息，比如如果有对应的x轴值，可以添加进来
        // 假设你的数据结构中每个数据点对象有一个名为'xValue'的属性对应x轴值
        // tooltipStr += `时间：${data.xValue}<br>`;
      }
      return tooltipStr;
    }
  }
};
var option3;

option3 = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    },
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ],
  tooltip: {
    trigger: 'axis', // 设置触发方式为坐标轴触发，即鼠标悬浮在坐标轴上的数据点附近时触发提示框
    axisPointer: {
      type: 'cross' // 设置坐标轴指针类型为十字准线，这样鼠标悬浮时会有更清晰的指示效果
    },
    formatter: function (params) {
      // params是一个数组，包含了触发tooltip的各个数据系列的相关信息
      let tooltipStr = '';
      for (let i = 0; i < params.length; i++) {
        let data = params[i].data;
        tooltipStr += `收缩压/舒张压：${data}<br>`;
        // 这里可以根据实际需求添加更多信息，比如如果有对应的x轴值，可以添加进来
        // 假设你的数据结构中每个数据点对象有一个名为'xValue'的属性对应x轴值
        // tooltipStr += `时间：${data.xValue}<br>`;
      }
      return tooltipStr;
    }
  }
};
var option4;

option4 = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ],
  tooltip: {
    trigger: 'axis', // 设置触发方式为坐标轴触发，即鼠标悬浮在坐标轴上的数据点附近时触发提示框
    axisPointer: {
      type: 'cross' // 设置坐标轴指针类型为十字准线，这样鼠标悬浮时会有更清晰的指示效果
    },
    formatter: function (params) {
      // params是一个数组，包含了触发tooltip的各个数据系列的相关信息
      let tooltipStr = '';
      for (let i = 0; i < params.length; i++) {
        let data = params[i].data;
        tooltipStr += `心率：${data}<br>`;
        // 这里可以根据实际需求添加更多信息，比如如果有对应的x轴值，可以添加进来
        // 假设你的数据结构中每个数据点对象有一个名为'xValue'的属性对应x轴值
        // tooltipStr += `时间：${data.xValue}<br>`;
      }
      return tooltipStr;
    }
  }
};


var option5;

option5 = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ],
  tooltip: {
    trigger: 'axis', // 设置触发方式为坐标轴触发，即鼠标悬浮在坐标轴上的数据点附近时触发提示框
    axisPointer: {
      type: 'cross' // 设置坐标轴指针类型为十字准线，这样鼠标悬浮时会有更清晰的指示效果
    },
    formatter: function (params) {
      // params是一个数组，包含了触发tooltip的各个数据系列的相关信息
      let tooltipStr = '';
      for (let i = 0; i < params.length; i++) {
        let data = params[i].data;
        tooltipStr += `体重：${data}<br>`;
        // 这里可以根据实际需求添加更多信息，比如如果有对应的x轴值，可以添加进来
        // 假设你的数据结构中每个数据点对象有一个名为'xValue'的属性对应x轴值
        // tooltipStr += `时间：${data.xValue}<br>`;
      }
      return tooltipStr;
    }
  }
};

export default {
  computed: {
    cc() {
      return cc
    }
  },
  data() {
    return {
      cq: false,
      tableData: [],
      tableData2: [],
      activeTab: 'healthArchives',
      residentInfo: {},
      healthInfo: {},
      relationInfo: [],
      qys: [],
      qy: {},
      dialogFormVisible: false,
      form: {},
      fws: [],
      jlbs:[],
    };
  },
  methods: {
    // 编辑
    bj(){
      this.$router.push({path:'/xy',query:{id:this.$route.query.id}})
    },

    // 查看签约详情
    viewDetails(row){

      this.$router.push({path:'/bj',query:{id: row.id}})
    },

    // 删除方法
    del(id) {
      alert(id)
      this.axios.post(`http://localhost:8202/jlb/deleteById/${id}`).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        } else {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
        this.getJkInfo();
      })
    },
    // 修改餐前餐后
    xg() {
      this.cq = !this.cq;
    },
    // 确定方法
    qd() {
      if (this.form.lx == '体重') {
        this.form.tz = this.form.value;
      } else if (this.form.lx == '血糖') {
        this.form.xt = this.form.value;
      } else if (this.form.lx == '血压') {
        var split = this.form.value.split('/');
        this.form.ssxy = split[0];
        this.form.szxy = split[1];
      } else if (this.form.lx == '心率') {
        this.form.xl = this.form.value;
      }
      console.log(this.form)
      this.axios.post(`http://localhost:8202/jlb/update`, this.form).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        } else {
          this.$message({
            type: 'error',
            message: '修改失败!'
          });
        }
        this.getJkInfo();
      })
    },
    // 取消方法
    qx() {
      this.form = {};
    },
    // 修改
    handleClick(row, s) {

      this.form = row;
      if (s == '1') {
        this.form.lx = "体重"
      } else if (s == '2') {
        this.form.lx = "血糖"
      } else if (s == '3') {
        this.form.lx = "血压"
      } else if (s == '4') {
        this.form.lx = "心率"
      }
      this.dialogFormVisible = true;
    },

    // 返回方法
    fh() {
      // 判断图表实例是否存在并销毁

      this.$router.push('/jmgl');
    },
    // 获取关联信息
    getRelationInfo() {
      var gl = {
        pid: this.$route.query.id
      };
      this.axios.post(`http://localhost:8202/person/yhgl`, gl).then(res => {
        this.relationInfo = res.data.data;
      })
    },
    //    获取信息
    getInfo() {
      this.axios.get(`http://localhost:8202/person/getInfo?id=${this.$route.query.id}`).then(res => {
        this.residentInfo = res.data.data;
      })
    },


    editFamilyInfo() {
      this.$router.push('/jmXg' + '?id=' + this.$route.query.id);
    },

    //  获取用户的健康信息
    getHealthInfo() {
      this.axios.get(`http://localhost:8202/jkjl/getInfo?id=${this.$route.query.id}`).then(res => {
        this.healthInfo = res.data.data;
        console.log(this.healthInfo);
      })
    },


    //   获取用户的签约信息
    getSignInfo() {
      this.axios.get(`http://localhost:8202/person/qy?id=${this.$route.query.id}`).then(res => {
        this.qys = res.data.data;
        for (var i = 0; i < this.qys.length; i++) {
          if (this.qys[i].qy != '3' && this.qys[i].qy != '5') {
            this.qy = this.qys[i];
          }
        }
      })
    },

    //   获取用户的健康信息
    getJkInfo() {
      this.axios.get(`http://localhost:8202/jlb/getInfo?id=${this.$route.query.id}`).then(res => {
        if (res.data.data.length > 1) {
          var i = 0;
          let lineDom = document.getElementById('line');
          let lineChart = echarts.init(lineDom);
          var jk = res.data.data;
          this.tableData = res.data.data;
          option.xAxis.data = [];
          option.series[0].data = [];
          for (i = 0; i < jk.length; i++) {
            if (jk[i].status == 1) {
              let dateObj = new Date(jk[i].ctime);
              let month = dateObj.getMonth() + 1;
              let day = dateObj.getDate();
              let monthDayStr = `${month}/${day}`;
              option.xAxis.data.push(monthDayStr);
              option.series[0].data.push(jk[i].tz);
            }
          }
          lineChart.setOption(option);
          option2.xAxis.data = [];
          option2.series[0].data = [];
          let lineDom2 = document.getElementById('line2');
          let lineChart2 = echarts.init(lineDom2);
          option2.xAxis.data = [];
          option2.series[0].data = [];
          for (i = 0; i < jk.length; i++) {
            if (jk[i].status == 1) {
              let dateObj = new Date(jk[i].ctime);
              let month = dateObj.getMonth() + 1;
              let day = dateObj.getDate();
              let monthDayStr = `${month}/${day}`;
              option2.xAxis.data.push(monthDayStr);
              option2.series[0].data.push(jk[i].xt);
            }
          }
          lineChart2.setOption(option2);

          option3.xAxis.data = [];
          option3.series[0].data = [];
          let lineDom3 = document.getElementById('line3');
          let lineChart3 = echarts.init(lineDom3);
          option3.xAxis.data = [];
          option3.series[0].data = [];
          option3.series[1].data = [];
          for (i = 0; i < jk.length; i++) {
            if (jk[i].status == 1) {
              let dateObj = new Date(jk[i].ctime);
              let month = dateObj.getMonth() + 1;
              let day = dateObj.getDate();
              let monthDayStr = `${month}/${day}`;
              option3.xAxis.data.push(monthDayStr);
              option3.series[0].data.push(jk[i].ssxy);
              option3.series[1].data.push(jk[i].szxy);
            }
          }
          lineChart3.setOption(option3);

          option4.xAxis.data = [];
          option4.series[0].data = [];
          let lineDom4 = document.getElementById('line4');
          let lineChart4 = echarts.init(lineDom4);
          option4.xAxis.data = [];
          option4.series[0].data = [];
          if (lineDom4) {
            for (i = 0; i < jk.length; i++) {
              if (jk[i].status == 1) {
                let dateObj = new Date(jk[i].ctime);
                let month = dateObj.getMonth() + 1;
                let day = dateObj.getDate();
                let monthDayStr = `${month}/${day}`;
                option4.xAxis.data.push(monthDayStr);
                option4.series[0].data.push(jk[i].xl);
              }
            }
            lineChart4.setOption(option4);
          }

          this.tableData2 = [];
          for (i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].status == 2) {
              this.tableData2.push(this.tableData[i]);
            }
          }
          option5.xAxis.data = [];
          option5.series[0].data = [];
          let lineDom5 = document.getElementById('line5');
          let lineChart5 = echarts.init(lineDom5);
          option4.xAxis.data = [];
          option4.series[0].data = [];
          if (lineDom5) {
            for (i = 0; i < jk.length; i++) {
              if (jk[i].status == 2) {
                let dateObj = new Date(jk[i].ctime);
                let month = dateObj.getMonth() + 1;
                let day = dateObj.getDate();
                let monthDayStr = `${month}/${day}`;
                option5.xAxis.data.push(monthDayStr);
                option5.series[0].data.push(jk[i].xt);
              }
            }
            lineChart5.setOption(option5);
          }
        }
      })

    },


    //   获取服务的信息
                                                     getServiceInfo() {
      this.axios.get(`http://localhost:8202/fw/getInfo?id=${this.$route.query.id}`).then(res => {
        this.fws = res.data.data;
        console.log(this.fws)

      })
    },

  },
  created() {
    this.getServiceInfo();
    this.getJkInfo();
    this.getInfo();
    this.getSignInfo();
    this.getHealthInfo();
    this.getRelationInfo();
  },

}


</script>
